<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" href="css/index.css">

		<link rel="stylesheet" href="css/font-awesome.min.css">
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon fa fa-safari"></span>
				<span class="mui-tab-label">查单</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon fa fa-cubes"></span>
				<span class="mui-tab-label">任务</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-tuiguang">
				<span class="mui-icon fa fa-share-square-o"></span>
				<span class="mui-tab-label">推广</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon fa fa-id-card-o"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon fa fa-user-circle-o"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">查单</h1>
					<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right"><a href="pages/gongdanchaxun.html">工单查询</a></button>
				</header>
				<div class="mui-content">
					<div class="title button"><button>呼叫综援</button><button>回家导航</button></div>

					<div class="title">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">Item 1</li>
							<li class="mui-table-view-cell">Item 2</li>
							<li class="mui-table-view-cell">Item 3</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">任务</h1></header>

				<div class="mui-content">
					<div id="segmentedControl1" class="mui-segmented-control">
						<a class="mui-control-item mui-active" href="#item1">待完成</a>
						<a class="mui-control-item" href="#item2">已完成</a>
						<a class="mui-control-item" href="#item3">已逾期</a>
					</div>

					<div>
						<div id="item1" class="mui-control-content mui-active">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
										<div class="mui-media-body">
											幸福
											<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
										<div class="mui-media-body">
											木屋
											<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
										</div>
									</a>
								</li>

							</ul>
						</div>
						<div id="item2" class="mui-control-content">
							<div>
								<p>现在还没有任务哦</p>
								<button>重新加载</button>

							</div>
						</div>
						<div id="item3" class="mui-control-content">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
										<div class="mui-media-body">
											幸福
											<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="../images/muwu.jpg">
										<div class="mui-media-body">
											木屋
											<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
										<div class="mui-media-body">
											CBD
											<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div id="tabbar-with-tuiguang" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">推广</h1></header>
				<div class="tuiguang mui-content">
					<div id="segmentedControl2" class="mui-segmented-control">

						<a class="mui-control-item mui-active" href="#item4">我的海报</a>

						<a class="mui-control-item" href="#item5">我的奖励</a>
					</div>

					<div>
						<div id="item4" class="mui-control-content mui-content mui-active">
							<p>温馨提醒您：现阶段暂无地推奖励活动，请知晓！</p>
						</div>
						<div id="item5" class="mui-control-content  mui-content">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									第三个选项卡子项-1
								</li>
								<li class="mui-table-view-cell">
									第三个选项卡子项-2
								</li>
								<li class="mui-table-view-cell">
									第三个选项卡子项-3
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">通讯录</h1>
				</header>
				<div class="mui-content">

					<div class="title">公司电话</div>
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
						<li class="mui-table-view-cell">
							<div class="mui-slider-cell">
								<div class="oa-contact-cell mui-table">
									<div class="oa-contact-avatar mui-table-cell">
										<img src="images/60x60.gif" />
									</div>
									<div class="oa-contact-content mui-table-cell">
										<div class="mui-clearfix">
											<h4 class="oa-contact-name">叶文洁</h4>
											<span class="oa-contact-position mui-h6">董事长</span>
										</div>
										<p class="oa-contact-email mui-h6">
											1234567891011
										</p>
									</div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-slider-cell">
								<div class="oa-contact-cell mui-table">
									<div class="oa-contact-avatar mui-table-cell">
										<img src="images/60x60.gif" />
									</div>
									<div class="oa-contact-content mui-table-cell">
										<div class="mui-clearfix">
											<h4 class="oa-contact-name">艾AA</h4>
											<span class="oa-contact-position mui-h6">总经理</span>
										</div>
										<p class="oa-contact-email mui-h6">
											1234567891011
										</p>
									</div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-slider-cell">
								<div class="oa-contact-cell mui-table">
									<div class="oa-contact-avatar mui-table-cell">
										<img src="images/60x60.gif" />
									</div>
									<div class="oa-contact-content mui-table-cell">
										<div class="mui-clearfix">
											<h4 class="oa-contact-name">罗辑</h4>
											<span class="oa-contact-position mui-h6">员工</span>
										</div>
										<p class="oa-contact-email mui-h6">
											1234567891011
										</p>
									</div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-slider-cell">
								<div class="oa-contact-cell mui-table">
									<div class="oa-contact-avatar mui-table-cell">
										<img src="images/60x60.gif" />
									</div>
									<div class="oa-contact-content mui-table-cell">
										<div class="mui-clearfix">
											<h4 class="oa-contact-name">云天明</h4>
											<span class="oa-contact-position mui-h6">员工</span>
										</div>
										<p class="oa-contact-email mui-h6">
											1234567891011
										</p>
									</div>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-slider-cell">
								<div class="oa-contact-cell mui-table">
									<div class="oa-contact-avatar mui-table-cell">
										<img src="images/60x60.gif" />
									</div>
									<div class="oa-contact-content mui-table-cell">
										<div class="mui-clearfix">
											<h4 class="oa-contact-name">史强</h4>
											<span class="oa-contact-position mui-h6">员工</span>
										</div>
										<p class="oa-contact-email mui-h6">
											1234567891011
										</p>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<div id="tabbar-with-map" class="mui-control-content">
				<header class="mui-bar mui-bar-nav">
					<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
					<h1 class="mui-title">我的</h1>
					<a class=" mui-pull-right" style="line-height: 44px;" href="pages/gerenziliao.html">个人资料</a>
				</header>
				<div class="mui-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" style="line-height: 42px;">
								<img class="mui-media-object mui-pull-left" src="images/cbd.jpg">
								<span>周玲</span>
								<button class="mui-pull-right">工作证</button>
							</a>
						</li>

					</ul>

					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">
								我的工单查询
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="pages/help.html">
								员工帮助查询
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="#tabbar-with-contact">
								同事通讯录
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="#tabbar-with-tuiguang">
								线下地推
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="setting.html">
								设置
							</a>
						</li>

					</ul>

				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
	</script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		(function($) {
			$('#scroll').scroll({
				indicators: true //是否显示滚动条
			});
			var segmentedControl = document.getElementById('segmentedControl');
			$('.mui-input-group').on('change', 'input', function() {
				if(this.checked) {
					var styleEl = document.querySelector('input[name="style"]:checked');
					var colorEl = document.querySelector('input[name="color"]:checked');
					if(styleEl && colorEl) {
						var style = styleEl.value;
						var color = colorEl.value;
						segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
					}
				}
			});
		})(mui);
	</script>

</html>